<!DOCTYPE html>
<html class="loginHtml">

<head>
    <meta charset="UTF-8">
    <title>智慧物业管家系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        body {margin: 0px; }
        .loginHtml{height: 100%;background: url('/static/property/images/login.png') no-repeat center center; background-size: cover; }
        * {box-sizing: content-box;box-sizing: border-box;}
        input:focus {outline: none;box-shadow: none;}
        .clearfix::after {content: "";display: block;clear: both;}
        .bigBox {max-width: 1200px;margin: 0 auto;margin-top:12%;}
        .loginBoxHe {float: right;width: 470px; }
        .loginBox { border-radius:4px; max-width: 470px;padding: 20px 0px 50px 0px;background: #ffffff;}
        .logoBox {height:70px;text-align: center; margin-bottom:20px;}
        .logoBox img { height:100%; }
        .logoText {font-size:36px;color:#1262F8;text-align: center;margin-bottom:40px;text-shadow: 1px 1px 2px #1262F8;letter-spacing: 2px;border-radius: 4px 4px 0px 0px;padding: 15px 0px 20px 0px; font-weight: bold; position: relative; }
        .logoTextgxx {position: absolute;bottom: 0px;left: calc(50% - 32px);height:6px; width: 64px;background: #D0E0FE;}
        .studyFormItem { position: relative;margin:0px 50px 20px 50px; }
        .studyInput {line-height: 50px; height: 50px; border: 1px solid #DDDDDD;display: block;width: 100%;padding: 0px 10px 0px 45px;border-radius:6px;color: #111111;background:#F5F5F5;font-size: 16px;}
        .studyFormItem input::-webkit-input-placeholder {color:#999999;}
        .studyFormItem input:-moz-placeholder {color:#999999;}
        .studyFormItem input::-moz-placeholder {color:#999999;}
        .studyFormItem input:-ms-input-placeholder {color:#999999;}
        .loginBox .studyFormItem label { display: inline-block;position: absolute; color: #757575;left: 5px;top:12px; line-height: 20px; padding: 0 5px;font-size: 14px; cursor: text;}
        .loginBox .studyFormItem label img {width: 24px; }
        .yanzmImg { position: absolute; top:9px; right: 10px;height:32px;width:95px;border-radius:4px;cursor: pointer;}
        .yzmInput {padding-right:110px;}
        .studyBtn {display: block;width: 100%;line-height:52px; height:52px; border: none; background: #1493FA; color: #fff;letter-spacing:4px;border-radius:4px;cursor: pointer;font-size: 20px;margin: 0 auto;margin-top: 20px; }
        .studyBtn:hover {background: #1586ED; }
        .xieyiBix {padding-left:50px;}
        .xieyiBix .yueDuGuiZ {font-size: 14px;color: #888888;position: relative;top:1px; }
        @media only screen and (min-width: 100px) and (max-width: 640px) {.bigBox { margin-top:40%;}.loginBoxHe {float: none;width: 100%; padding: 10px; }.logoText {font-size:30px;text-shadow: none; margin-bottom:30px; } .studyFormItem {margin: 0px 20px 10px 20px;  } .xieyiBix { padding-left: 20px; }.studyBtn { margin-top:20px; }}
    </style>
</head>

<body>
<div class="bigBox clearfix">
    <div class="loginBoxHe">
        <form class="loginBox layui-form">
            <div class="logoText">智慧物业数字化服务平台 <div class="logoTextgxx"></div></div>
            <div class="studyFormItem inputItem">
                <label><img src="/static/property/images/username.png" alt=""></label>
                <input type="text" name="username"  placeholder="请输入用户名" lay-verify="required" autocomplete="off" class="studyInput">
            </div>
            <div class="studyFormItem inputItem">
                <label><img src="/static/property/images/password.png" alt=""></label>
                <input type="password" name="password" placeholder="请输入登录密码" autocomplete="off" lay-verify="required" class="studyInput">
            </div>
            <div class="studyFormItem inputItem" id="imgCode">
                <label><img src="/static/property/images/vercode.png" alt=""></label>
                <input type="text" name="verify_code" placeholder="请输入验证码" autocomplete="off" lay-verify="required"  class="studyInput yzmInput"  maxlength="4">
                <img src="/captcha" class="yanzmImg" id="refreshCaptcha" onclick="this.src='/captcha?t='+Math.random()">
            </div>
            {/*<div class="clearfix studyFormItem">
            <div class="" style="float:left;">
                <input type="checkbox" name="remember" lay-skin="primary" class="yueDuGuiZ" title="记住密码">
            </div>
            <div style="float:right;">
                <a href="javaScript:void(0);" style="margin-top: 7px;">忘记密码？</a>
            </div>
        </div>*/}
            <div class="clearfix studyFormItem">技术支持：东莞市众冠网络科技有限公司</div>
            <div class="clearfix studyFormItem">服务支持：158 9992 9162（微信同号）</div>
            <div class="studyFormItem">
                <button class="layui-btn layui-btn-fluid studyBtn" lay-submit lay-filter="login">登 录</button>
            </div>
        </form>
    </div>
</div>
<script src="/static/common/lib/layui-v2.9.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery'], function() {
        var $ = layui.jquery,form = layui.form,layer = layui.layer;
        if (top.location != self.location) top.location = self.location;
        $('.bind-password').on('click', function() {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });
        setTimeout(function() {
            $('#refreshCaptcha').click()
        }, 300)
        $('.icon-nocheck').on('click', function() {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });
        // 进行登录操作
        form.on('submit(login)', function(data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.verify_code == '') {
                layer.msg('验证码不能为空');
                return false;
            }
            var loadeIndex = layer.load(0, {
                shade: [0.5, '#8F8F8F'],
                time: 0
            });
            $.post('{:url("propertyUserDoLogin")}', data, function(res) {
                if (res.code == -2) {
                    $('#refreshCaptcha').click();
                }
                if (res.code != 0) {
                    layer.close(loadeIndex);
                    layer.msg(res.msg, {offset: '15px',icon: 2,time: 1000
                    });
                } else {
                    //登入成功的提示与跳转
                    layer.msg('登入成功', {
                        offset: '15px', icon: 1,time: 1000
                    }, function() {
                        window.location = '{:url("propertyIndex")}';
                    });
                }
            });
            return false;
        });
    });
</script>
</body>
</html>